<template>
  <div class="app-container">
	  <!-- {{ parseTime(new Date(),'{y}-{m}-{d} {h}:{i}')}} -->
	<el-row>
		<el-form-item label="学校">
		  <el-select v-model="yuyue.schoolId" @change="handleQuery" placeholder="请选择学校" :disabled="isXxidFlag">
		    <el-option
		      v-for="d in dept_self"
		      :key="d.value"
		      :label="d.label"
		      :value="d.value"
		    />
		  </el-select>
		  </el-form-item>
		  &nbsp;&nbsp;
	<el-form-item label="查看时间">
	  <el-date-picker
		 v-model="yuyue.yydate"
		 value-format="YYYY-MM-DD"
		 type="date"
		 range-separator="-"
		 placeholder="日期"
		 @change="dateChange"
		 :clearable="false"
	  ></el-date-picker>
	  </el-form-item>
	  
	</el-row>
	<el-row>
	  <!-- <right-toolbar :search="false" @queryTable="handleQuery"></right-toolbar> -->
	  <right-toolbar :search="false" @queryTable="handleQuery" style="width: 100px;"></right-toolbar>
	</el-row>
	<div class="yyck-sblist">
		<el-card style="width: 200px;" v-for="yygz in yuyueguizeList2"  :v-loading="true" >
			  <template #header>
					<div class="card-header" style="font-size: 80%;">
						<el-tag type="info">{{yygz.gzName}}</el-tag>&nbsp;
						<!-- <el-tag type="danger" v-if="yygz.isyuyue==true">已预约</el-tag> -->
						<br>
						<el-tag type="warning">还可预约： {{yygz.renshu}}人</el-tag>
					</div>
			  </template>
			<div>
				<el-tag type="">
					<span :alt="yygz.gzName">
						时间 : {{yygz.startTime}} - {{yygz.endTime}} <br>
					</span>
				</el-tag>
				<el-scrollbar style="width: 170px;height: 100px;">
					<template v-for="(item,index) in yygz.data">
						<el-tooltip class="box-item" effect="dark" :content="'预约设备：'+item.sb" placement="right">
							<el-tag type="danger" class="yy-titlename">
								{{item.sname}} - <svg-icon :icon-class="getProIcon(item.proid)" />{{getProName(item.proid)}}<br>
							</el-tag>
						</el-tooltip>
					</template>
					<span v-if="yygz.data.length<1 || yygz.data==null">
						<br/><br/>
						<el-tag type="info">
							<el-icon><CollectionTag /></el-icon>
							暂无预约
						</el-tag>
					</span>
				</el-scrollbar>
			</div>
<!-- 			  <template #footer>
					  <el-radio-group v-model="yygz.yuyuestatus"  size="small">
						<el-radio-button :label="true" :disabled="yygz.disable1"  @change="radioChange(yygz)">预约</el-radio-button>
						<el-radio-button :label="false" :disabled="yygz.disable2"  @change="radioChange(yygz)">取消</el-radio-button>
					  </el-radio-group>
			  </template> -->
		</el-card>
	  			
	  			
	</div>
	  

	
  </div>
</template>

<script setup name="Yyck">
import { Grid, MoreFilled,Timer} from '@element-plus/icons-vue'
import { checkPermi, checkRole } from "@/utils/permission"; // 1. 导入权限判断函数
import useUserStore from "@/store/modules/user";
import { listYuyue, getYuyue, addYuyue, updateYuyue,cancelYuyue } from "@/api/tc/yuyue";
import { listShebei,updateShebeiState} from "@/api/tc/shebei";
import { listDept } from "@/api/system/dept";
import { listStudent} from "@/api/tc/student";
import { listClass} from "@/api/tc/class";
import { listYuyueguize} from "@/api/tc/yuyueguize";
import { listProject} from "@/api/tc/project";

const { proxy } = getCurrentInstance();
const userStore = useUserStore();

const yuyueList = ref([]);
const loading = ref(true);
const total = ref(0);
const title = ref("");

const dept_self = ref([]);
const classList = ref([]);
const classList2 = ref([]);
const isXxidFlag=ref(false);
const shebeiList = ref([]);
const tcProjectList = ref([]);
const yuyueguizeList = ref([]);
const yuyueguizeList2 = ref([]);
var defaultdate=new Date();
const tmpProPar={pageNum: 1,pageSize: 999,xmStatus:'1'};

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    xxid: null,
    sbClientid: null,
    yygz: null,
    status: null,
    yydata: null,
    yydate: null,
	sbXxid:null,
	sbName:null
  },
  yuyue:{
	  sb:{shebeiProjectList:[]},
	  schoolId:null,
	  classId:null,
	  studentId:null,
	  student:null,
	  yydate: proxy.parseTime(new Date(),'{y}-{m}-{d}'),
	  projectid:null,
	  yygz:null
	  
  },
  rules: {}
});

const { queryParams, form,yuyue } = toRefs(data);

const drawer = ref(false)
const direction = ref('rtl')



onMounted(() => {
	// console.log(proxy.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}'))
	// getList();
	getProjectList();
	getDeptInfo();
})




function dateChange(e){
	// console.log(e)
	yuyue.value.yydate=e;
	if(e!=null && e!=''){
		yuyueguizeListClear();
		let par={"pageNum":1,"pageSize":999,"yydate":e,"xxid":yuyue.value.schoolId}
		// console.log(par)
		// console.log(par)
		proxy.$modal.loading('正在加载！')
		listYuyue(par).then(response => {
		  yuyueList.value = response.rows;
		  // console.log(yuyueList.value)
		  if(yuyueList.value.length>0){
			yuyueguizeList2.value.forEach((item,i2)=>{
				item.isyuyue=false; //是否预约标识
				item.disable1=false; //预约按钮
				item.disable2=false; //取消按钮
				item.data.length = 0;
			  yuyueList.value.forEach((item2,i)=>{
				  let count=0;
					if(item2.yygz==item.id){
						JSON.parse(item2.yydata).forEach((item3,i3)=>{
							item.data.push({"sname":item3.sname,"proid":item3.proid,"sb":item2.sbClientid})
							let count=parseInt(item.renshu);
							item.renshu=count-1
							// console.log(item3.student)
							// console.log(yuyue.value.studentId)
							if(item3.student==yuyue.value.studentId){
								item.isyuyue=true; //已约标识
								item.disable1=true; //预约按钮
								// yuyue.value.yygz=item2.id;
							}
						  
						})
					}  
					  
				})  
				  
			  })
		  }
			proxy.$modal.closeLoading();
		  // total.value = response.total;
		  // loading.value = false;
		}).catch(()=>{
			// loading.close();
			proxy.$modal.closeLoading();
		});
		
		
	}
}
function radioChange(e){}




function getDeptInfo(){
		// console.log(userStore.user)
		if(checkRole(['admin','common'])){
			listDept({}).then(response => {
			  	response.data.forEach(function (element) {
			  	  // 遍历数组，对每个元素进行操作
				   if(element.xxlevel !=null && element.xxlevel != ''){
						dept_self.value.push({"value":element.deptId,"label":element.deptName});
				   }
			  	});
				yuyue.value.schoolId=dept_self.value[0].value;
				// getClassList(null);
				handleQuery();
			});
			isXxidFlag.value=false;
		}else{
			dept_self.value.push({"value":userStore.user.deptId,"label":userStore.user.dept.deptName});
			yuyue.value.schoolId=dept_self.value[0].value;
			isXxidFlag.value=true;
			   handleQuery();
			// getClassList(yuyue.value.schoolId);
		}
}


// function schoolChange(e){
// 	classList2.value= classList.value.filter(function(currentValue,index,arr){
// 		// console.log(currentValue)
// 		return currentValue.xxid == e ;
// 	});
	
// 	if(classList2.value.length==0){
// 		yuyue.value.classId=null;
// 		yuyue.value.classNjId=null;
// 	}else{
// 		yuyue.value.classId=classList2.value[0].value;
// 		yuyue.value.classNjId=classList2.value[0].njid;
// 	}
// 	handleQuery();
// }

/** 查询体测项目列表 */
function getProjectList() {
  // loading.value = true;
  listProject(tmpProPar).then(response => {
    tcProjectList.value = response.rows;
    // loading.value = false;
  });
}

/** 查询预约规则列表 */
function getList() {
	// console.log("-----yuyue getList----")
	loading.value = true;
	let par={"pageNum":1,"pageSize":999,"xxid":yuyue.value.schoolId}
	// console.log(par)
  listYuyueguize(par).then(response => {
    yuyueguizeList.value = response.rows;
    loading.value = false;
	if(!isNull(yuyue.value.yydate) && yuyueguizeList.value.length>0){
		dateChange(yuyue.value.yydate)
	}else{
		yuyueguizeListClear();
	}
  });
	// // let par={"pageSize":999,"sbXxid":queryParams.value.xxid}
 //  listShebei(queryParams.value).then(response => {
	// // console.log(response.rows)
 //    shebeiList.value = response.rows;
 //    total.value = response.total;
	// initsbListStatus();
	// getyygzList();
 //  });
}


/** 查询体测预约列表 */
function getyyList() {}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}


const getDeptName=(id)=>{
	for(let d of dept_self.value){
		 if(id==d.value){
			 return d.label;
		 }
	}
}
const getProName=(id)=>{
	for(let d of tcProjectList.value){
		 if(id==d.id){
			 return d.xmMc;
		 }
	}
}
const getProIcon=(id)=>{
	for(let d of tcProjectList.value){
		 if(id==d.id){
			 return d.icon;
		 }
	}
}

const isNull=(...par)=>{
	// par.forEach((v,i,par)=>{
	// 	console.log(v)
	// 	if(v==null  || v =='') return true;
	// })
	for(let i=0;i<par.length;i++){
		if(par[i]==null  || par[i] =='') {
			return true;
		}
	}
	return false;
}

const yuyueguizeListClear=()=>{
	yuyueguizeList2.value=[];
	yuyueguizeList.value.forEach((item,i)=>{
		yuyueguizeList2.value.push({"xxid":item.xxid,"startTime":item.startTime,"endTime":item.endTime,"id":item.id,"renshu":item.renshu,"gzName":item.gzName,
		"isyuyue":false,"yuyuestatus":null,data:[]});
	})
	//data:[{"sname":null,"proname":null}]
	// console.log("----------------")
	// console.log(yuyueguizeList2.value)
}



</script>
<style>
	.yyck-sblist{
		margin-top: 10px;
		width:100%;
		display:flex;
		flex-wrap: wrap;
		align-items:flex-start;
		gap: 5px;
		
	}
	.yyck-p-type {
	  display: flex;
	  justify-content: left;  
	  /* width:400px; */
	  flex-wrap: wrap;
	  /* height: 200px; */
	  font-size: 80%;
	  word-break: break-all;
	}
	.yyck-p-tyleScrollbar{
	  height: 100px;
	  width: 100%;
	}
	.yyck-titlename{
		font-size: 80%;
	}
	.el-drawer__header{
		 margin-bottom:5px !important;
	}
</style>